<template>
	<view class="order">
		<view class="nav-tabber">
			<view class="list">
				<view :class="{active:activeIndex==index}" class="item" v-for="(item,index) in navList" :key="index" @tap="changeNav(index)">
					{{item}}
				</view>
			</view>
		</view>
		<prepay-order v-if="activeIndex==0" @refresh="getOrder" :orderList="prePayList"></prepay-order>
		<payed-order v-if="activeIndex==1" @refresh="getOrder" :orderList="payedList"></payed-order>
		<send-goods-order v-if="activeIndex==2" @refresh="getOrder" :orderList="sendGoodsList"></send-goods-order>
		<get-goods-order v-if="activeIndex==3" @refresh="getOrder" :orderList="getGoodsList"></get-goods-order>
		<return-order v-if="activeIndex==4" @refresh="getOrder" :orderList="returnList"></return-order>
	</view>
</template>

<script>
	import {
		requestGetOrder
	} from 'api/user/order.js';
	
	import PrePayOrder from './prepay-order.vue'
	import PayedOrder from './payed-order.vue'
	import SendGoodsOrder from './send-goods-order.vue'
	import GetGoodsOrder from './get-goods-order.vue'
	import ReturnOrder from './return-order.vue'
	export default {
		data() {
			return {
				activeIndex: 0,
				navList: ['待付款', '已付款', '已发货', '已收货', '申请退款'],
				prePayList: [],
				payedList: [],
				sendGoodsList: [],
				getGoodsList: [],
				returnList: [],
			};
		},
		methods: {
			getOrder() {
				requestGetOrder().then(res => {
					let arr = res.data.orderList;
					this.prePayList = [];
					this.payedList = [];
					this.sendGoodsList = [];
					this.getGoodsList = [];

					// console.log(arr);
					arr.forEach(val => {
						switch (val.order.status) {
							case 0:
								this.prePayList.push(val);
								break;
							case 1:
								this.payedList.push(val);
								break;
							case 2:
								this.sendGoodsList.push(val);
								break;
							case 3:
							case 4:
								this.getGoodsList.push(val);
								break;
						}

					})
				})
			},
			changeNav(index) {
				this.activeIndex = index;
			}
		},
		onShow() {
			this.getOrder();
		},
		onLoad(e) {
			this.activeIndex = e.index;
		},
		components:{
			'prepay-order':PrePayOrder,
			'payed-order':PayedOrder,
			'send-goods-order':SendGoodsOrder,
			'get-goods-order':GetGoodsOrder,
			'return-order':ReturnOrder
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		overflow: hidden;

		.nav-tabber {
			position: fixed;
			z-index: 999;
			paddingr-top: 14rpx;
			width: 100%;
			height: 62rpx;
			background-color: #354e44;
			color: #fff;
			font-size: 15px;
			line-height: 31px;

			.list {
				width: 100%;
				height: 100%;
				display: flex;

				.item {
					margin: auto;
				}

				.active {
					color: #dd524d;
				}
			}
		}
	}
</style>
